<template>
  <div>
    <Page ref="page" :search-config="searchConfig" :table-config="tableConfig" :toolbar-config="toolbarConfig" />
    <brand-add ref="brandAdd" @save-success="addSuccess" />
    <brand-update ref="brandUpdate" @save-success="updateSuccess" />
  </div>
</template>
<script setup lang="ts">
import { getBrandPageList, delBrand } from "@/api/product/brandApi";
import { MPage as Page } from "page-com";
import { PageSearchConfig, PageTableConfig, ToolbarConfig, type PageInstance } from "page-com";
import { reactive, shallowReactive, useTemplateRef } from "vue";
import BrandAdd from "./BrandAdd.vue";
import { msgConfirm, successMsg } from "@/utils/message";
import BrandUpdate from "./BrandUpdate.vue";
import { hasPerms } from "@/utils/auth";
import { useOffineIcon } from "@/components/ReIcon/src/hooks";
const searchConfig = shallowReactive<PageSearchConfig>({
  pageSearchFrame: [
    {
      frameType: "input",
      key: "brandName",
      label: "品牌名称"
    },
    {
      frameType: "datetimerange",
      key: "createTime",
      label: "创建时间",
      searchKey: ["createTimeStart", "createTimeEnd"]
    }
  ],
  searchFun: getBrandPageList
});
const tableConfig = reactive<PageTableConfig>({
  pageTableFrame: [
    {
      key: "brandName",
      label: "品牌名称"
    },
    {
      key: "brandLogo",
      label: "品牌LOGO",
      frameType: "avatar"
    },
    {
      key: "createTime",
      label: "创建时间"
    },
    {
      frameType: "multi",
      key: "multi",
      label: "操作",
      separate: "",
      multi: [
        {
          frameType: "link",
          value: "删除",
          key: "deleteBtn",
          icon: useOffineIcon("ep:delete"),
          click: showDel,
          visible: hasPerms("/product/brand/del")
        },
        {
          frameType: "link",
          value: "修改",
          key: "updateBtn",
          icon: useOffineIcon("ep:edit"),
          click: showUpdate,
          visible: hasPerms("/product/brand/update")
        }
      ]
    }
  ]
});
const toolbarConfig = shallowReactive<ToolbarConfig>({
  buttons: [
    {
      value: "添加品牌",
      click: showAdd,
      visible: hasPerms("/product/brand/add")
    }
  ]
});
const brandAdd = useTemplateRef("brandAdd");
const page = useTemplateRef<PageInstance>("page");
function showAdd() {
  brandAdd.value.show();
}
const brandUpdate = useTemplateRef("brandUpdate");
function showUpdate(vo: ShopBrandVo) {
  brandUpdate.value.show(vo);
}

function addSuccess() {
  page.value.onSearch();
}
function updateSuccess() {
  page.value.onSearch();
}

function showDel(vo: ShopBrandVo) {
  msgConfirm("确认删除吗？", async () => {
    let res = await delBrand({ id: vo.id });
    if (res.code == RESPONSE_CODE.SUCCESS) {
      successMsg("删除成功");
      page.value.onSearch();
    }
    return res;
  });
}
</script>
